<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Speech Recognition</title>
  <script>
    // 当页面加载完毕时执行以下内容
    window.addEventListener('load', () => {
      // 获取 id 为 button 的元素对象
      const button = document.getElementById('button')

      // 给该按钮添加点击事件监听
      button.addEventListener('click', () => {
        // 如果按钮的动画名称是flash，即正在录音，则停止录音，并重置相应样式和文本内容
        if (button.style['animation-name'] === 'flash') {
          recognition.stop()
          button.style['animation-name'] = 'none'
          button.innerText = '开始录音'
        } else {
          // 否则开始录音并修改相应样式和文本内容
          button.style['animation-name'] = 'flash'
          button.innerText = '结束录音'
          recognition.start()
        }
      })

      // 获取 id 为 content 的元素对象
      const content = document.getElementById('content')

      // 创建一个新的语音识别对象
      const recognition = new webkitSpeechRecognition()

      // 设置属性：持续识别，中间结果可用，语言为中文（中国）
      recognition.continuous = true
      recognition.interimResults = true
      recognition.lang = 'zh-CN'    // 普通话
      // recognition.lang = 'zh-HK'   // 香港粤语

      // 在获取到结果时调用相关函数处理数据
      recognition.addEventListener('result', (event) => {
        let result = ''
        // 不支持数组方法，需要手动遍历
        for (let i = 0; i <= event.resultIndex; i++) {
          result += event.results[i][0].transcript;
        }
        content.innerText = result
      })
    })
  </script>
  <style>
    button {
      background: yellow;
      animation: none 3s infinite alternate;
    }

    @keyframes flash {
      0% {
        background: red;
      }

      50% {
        background: green;
      }
    }
  </style>
</head>

<body>
  <button id="button">开始录音</button>
  <div id="content"></div>
</body>

</html>